<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-19 17:05:01
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-05 16:29:21
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\views\system\dict\index.vue
 * @Description: 字典管理
-->
<script setup lang="ts">
import formateDate from '@/utils/formateDate'
import { useRequest } from 'vue-hooks-plus'
import { dictResult, result, importSuccess } from "@/utils/excelResult"
import DictModal from './components/DictModal.vue'
import { dictionaryPageApi, batchCreateListApi } from "@/api/system/dict/index"


const router = useRouter()

const templateUrl = '/dictImport.xlsx' // 下载模板

const typeList = ref([])
const total = ref(0)

const queryParams = ref<any>({
  page: 1,
  size: 20,
  name: '',
})
// 搜索条件组件配置数据
const conditionComponents = ref([
  {
    type: 0,
    key: 'name',
    width: "220px",
    placeholder: '请输入字典名称'
  },
])
// 表头
const columns = ref([
  {
    title: '序号',
    width: 70,
    dataIndex: 'key',
    formatter: (_row: any, _column: any, _cellValue: any, index: number) => {
      return index + 1
    }
  },
  {
    title: '字典名称',
    minWidth: 400,
    dataIndex: 'name',
    slotName: 'name',
  },
  {
    title: '字典备注',
    minWidth: 400,
    dataIndex: 'dictionaryRemark',
  },
  {
    title: '创建时间',
    minWidth: 140,
    dataIndex: 'createdTime',
    formatter: (record) => {
      return formateDate(record.createdTime).format('YYYY.MM.DD HH:mm:ss')
    },
  },
  {
    title: '操作',
    minWidth: 120,
    dataIndex: 'default',
    slotName: 'default',
  }
])

const title = ref("")

const visible = ref(false)
const dictId = ref('')
const dictName = ref('')
const dictionaryRemark = ref('')

const importVisible = ref(false)

const { run: dictionaryPage, loading } = useRequest(dictionaryPageApi, {
  manual: true,
  onSuccess: (res: any) => {
    typeList.value = res.content || []
    total.value = res.totalElements
  }
})

// 字典详情
function handleDetail(id: string, name: string) {
  router.push({
    path: `/system/dict/data`, query: {
      id: id,
      name: name
    }
  })
}

/** 修改按钮操作 */
const handleUpdate = (row) => {
  title.value = "编辑字典"
  dictId.value = row.id
  dictName.value = row.name
  dictionaryRemark.value = row.dictionaryRemark
  visible.value = true
}

// 编辑关闭
const handleCancel = (isUpdate = false) => {
  visible.value = false
  if (isUpdate) {
    onSearch()
  }
}

onSearch()

// 过滤查询
function onSearch() {
  dictionaryPage(queryParams.value)
}
// 条件过滤
function formSearch(params){
  queryParams.value = {
    ...queryParams.value,
    ...params,
  }
  onSearch()
}


// 字典导入
const { run: batchCreateList, loading: dictLoading } = useRequest(batchCreateListApi, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (res: any) => {
    result(res)
    if(importSuccess.value){
      importVisible.value = false
    }
  },
})
function importSubmit(item: any){
  batchCreateList(dictResult(item))
}
</script>
<template>
  <div class="app-container">
    <SearchBar :components="conditionComponents" @search="formSearch" class="mb-[16px]" >
      <template #rightArea>
        <el-button @click="importVisible = true">导入字典</el-button>
      </template>
    </SearchBar>
    <TableForm :auto-height="true" :data="typeList" :columns="columns"
      :tableLoading="loading" :total-count="total" :showToolBar="false"
      @refresh="formSearch">
      <template #name="{ record }">
        <el-button link type="primary" @click="handleDetail(record.id as string, record.name as string)">
          <div class="w-[280px] text-left truncate">{{ record.name }}</div>
        </el-button>
      </template>
      <template #default="{ record }">
        <el-button link type="primary" @click="handleUpdate(record)">编辑</el-button>
        <el-button link type="primary"
          @click="handleDetail(record.id as string, record.name as string)">字典数据</el-button>
      </template>
    </TableForm>

    <!-- 编辑 -->
    <DictModal v-if="visible" :visible="visible" :id="dictId" :name="dictName" :dictionaryRemark="dictionaryRemark"
      :title="title" @cancel="handleCancel" />

    <!-- 导入字典 -->
    <BulkImport v-if="importVisible" :visible="importVisible" fileName="导入字典" :url="templateUrl" :loading='dictLoading' @cancel="importVisible = false" @submit="importSubmit" />
  </div>
</template>

